/**
* Created by yyr on 2018/1/10
*已设立基金》头部编辑
*/
<template>
    <div>
        <div class="ca-box ca-p-20">
            <el-row>
                <el-col :span="24" class="ca-align-right ca-m-b-10">
                    <div>
                        <el-button type="primary" @click="saveFundHead()" size="small">保存</el-button>
                        <el-button  @click="cancel()" size="small">取消</el-button>
                    </div>
                </el-col>
            </el-row>
            <div >
                <el-form label-width="170px" :rules="rules" ref="ruleForm" :model="fund">
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="基金全称" labelWidth="120px" prop="fundFullname">
                                <el-input  placeholder="请输入内容" v-model="fund.fundFullname" :maxlength="100"></el-input>
                            </el-form-item>
                            <el-form-item label="基金类型" labelWidth="120px">
                                <el-select v-model="fund.fundType" placeholder="请选择" style="width: 100%">
                                    <el-option
                                        v-for="item in initView.fundType"
                                        :label="item.name"
                                        :key="item.id"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="投资期(年)"  labelWidth="120px" prop="investmentPeriod">
                                <el-input type="number"  placeholder="请输入内容" v-model="fund.investmentPeriod"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="基金简称" labelWidth="120px" prop="fundName">
                                <el-input   placeholder="请输入内容"  v-model="fund.fundName" :maxlength="100"></el-input>
                            </el-form-item>
                            <el-form-item label="基金规模(万元)" labelWidth="120px" prop="fundScale">
                                <el-input  placeholder="请输入内容" v-model="fund.fundScale"></el-input>
                            </el-form-item>
                            <el-form-item label="退出期(年)"  labelWidth="120px" prop="exitPeriod">
                                <el-input type="number"  placeholder="请输入内容" v-model="fund.exitPeriod"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="成立时间" labelWidth="120px">
                                <el-date-picker  type="date"  placeholder="选择日期" style="width: 100%;" v-model="fund.establishTime"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="基金经理" labelWidth="120px">
                                <el-select v-model="fundUser"
                                           filterable
                                           @change="changeFundUser"
                                           placeholder="请选择" style="width:100%;">
                                    <el-option
                                        v-for="item in userOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="投资方向" labelWidth="120px">
                                <el-select v-model="industry"
                                           @change="changeIndustry"
                                           placeholder="请选择"
                                           style="width:100%">
                                    <el-option
                                        v-for="item in initView.industry"
                                        :label="item.name"
                                        :key="item.id"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="15" class="ca-m-l-20 ca-m-t-8">
                            <el-tag
                                v-for="item in industryList"
                                :key="item.id"
                                :closable="true"
                                :close-transition="false"
                                @close="closeIndustry(item)"
                                :type="item.type" class="ca-m-r-10">
                                {{item.industry | getNameById('industry')}}
                            </el-tag>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="基金管理团队"  labelWidth="120px">
                                <el-select v-model="userTeamItem"
                                           @change="changeUserTeam"
                                           placeholder="请选择"
                                           filterable
                                           style="width:100%">
                                    <el-option
                                        v-for="item in userOptions"
                                        :label="item.label"
                                        :key="item.value"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="15" class="ca-m-l-20 ca-m-t-8">
                            <div>
                                <el-tag
                                    v-for="item in fundUserList"
                                    v-if="item.userType === '2'"
                                    :key="item.id"
                                    :closable="true"
                                    :close-transition="false"
                                    @close="closeUserItem(item)"
                                    :type="item.type" class="ca-m-r-10">
                                    {{item.userName}}
                                </el-tag>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from '../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    export default {
        data() {
            var validateNumber = (rule, value, callback) => {
                var reg = /^\d{1,14}(\.\d{1,6})?$/;
                if ((value !== '') && (!reg.test(value))) {
                    callback(new Error('请输入正确范围的数字'));
                } else {
                    callback();
                }
            };
            return {
                itemId: this.$route.params.fundId,
                initView: {
                    fundType: this.$store.state.user.dictionaryMap.fundType,//基金类型
                    industry: this.$store.state.user.dictionaryMap.industry, //投资方向
                    fundState: this.$store.state.user.dictionaryMap.foundation,// 设立状态
                    userEntityList: this.$store.state.user.department.userEntityList,//客户
                },
                fundData: {},
                fund: {},
                fundAnsatEstList: [],
                fundUserList: [],
                industryList: [],
                userOptions: [],
                fundUser: '',//基金经理
                industry: '',//投资方向
                userTeamItem: '',
                rules: {
                    fundFullname: [
                        { required: true, message: '请输入基金全称', trigger: 'blur' },
                    ],
                    fundName: [
                        { required: true, message: '请输入基金简称', trigger: 'blur' },
                    ],
                    investmentPeriod: [
                        { required: true, message: '请输入投资期', trigger: 'blur' },
                    ],
                    exitPeriod: [
                        { required: true, message: '请输入退出期', trigger: 'blur' },
                    ],
                    fundScale: [
                        { validator: validateNumber, trigger: 'blur' }
                    ],
                },
            }
        },
        watch: {
        },
        props: [
        ],
        created() {
            this.getHeadDetail();
        },
        mounted() {
            this.userOptions = this.initView.userEntityList.map(item => {
                return { value: item.id, label: item.userName };
            });
        },
        methods: {
            getHeadDetail() {
                apiHttp(api.HEAD_DETAIL,{fundId: this.itemId}).then( ret=>{
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.fund = ret.data.fund;
                        this.fundAnsatEstList = ret.data.fundAnsatEstList;//投前基金信息
                        this.fundUserList = ret.data.fundUserList;//基金经理
                        this.industryList = ret.data.industryList;//投资方向
                        this.fund.fundState = ret.data.fund.fundState.toString()
                        if (this.fundUserList.length > 0) {
                            for (let i of this.fundUserList) {
                                if (i.userType === '1') {
                                    this.fundUser = i.userName;
                                }
                            }
                        }
                    }
                })
            },
            //添加投资方向tag
            changeIndustry(industryItem) {
                let flag = false;
                for (let i of this.industryList) {
                    if (i.industry === industryItem) {
                        flag = true;
                        return;
                    }
                }
                if (!flag) {
                    this.industryList.push({industry: industryItem,fundId: this.itemId,id: ''})
                }
            },
            //关闭投资方向tag
            closeIndustry(tag) {
                this.industryList.splice(this.industryList.indexOf(tag),1);
            },
            //保存
            saveFundHead() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        let query = {
                            fund: this.fund,
                            fundAnsatEstList: this.fundAnsatEstList,
                            industryList: this.industryList,
                            fundUserList: this.fundUserList
                        }
                        apiHttp(api.HEAD_CHANGE, query).then( ret=>{
                            if (ret.resCode === STATUS_HTTP_SUCCESS) {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!',
                                    center: true
                                });
                                this.$emit('addRedDot')
                                this.cancel();
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            //取消
            cancel() {
                this.$emit('isEdit', false);
            },
            //改变基金经理
            changeFundUser(val) {
                this.fundUserList.map((userItem, index)=>{//如果基金经理存在，就清空
                    if (userItem.userType === '1') {
                        this.fundUserList.splice(index,1)
                    }
                })
                this.initView.userEntityList.map(user=>{//更改基金经理
                    if (user.id === val) {
                        this.fundUserList.push({
                            fundId: this.itemId, //基金主id
                            id: '',    //主id
                            userId: val,  //用户id
                            userName: user.userName,  //用户名称
                            userType: '1',  //用户类型  1：基金经理；2：基金管理团队
                        })
                    }
                })
            },
            //添加管理团队
            changeUserTeam(val) {
                let team = [];
                if (this.fundUserList.length > 0) {
                     this.fundUserList.map(user => {
                        if (user.userType === '2') {
                            team.push(user.userId);
                        }
                    })
                }
                if (team.indexOf(val) === -1) {//没有重复，添加
                    this.initView.userEntityList.map(user=>{//更改基金经理
                        if (user.id === val) {
                            this.fundUserList.push({
                                fundId: this.itemId, //基金主id
                                id: '',    //主id
                                userId: val,  //用户id
                                userName: user.userName,  //用户名称
                                userType: '2',  //用户类型  1：基金经理；2：基金管理团队
                            })
                        }
                    })
                }
            },
            //关闭管理团队
            closeUserItem(tag) {
                this.fundUserList.splice(this.fundUserList.indexOf(tag),1);
            }
        },
        components: {
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.ca-m-t-8{
    margin-top: 8px;
}
</style>
